<template>
  <div class="loginContainer">
    <div class="loginBox">
      <div class="login-title">
        华富生鲜管理后台
      </div>
      <div class="formBox">
        <el-form :model="loginForm" :rules="rules" label-width="70px" ref='loginForm'>
          <el-form-item label="用户名:" prop="account">
            <el-input v-model="loginForm.account" placeholder="请填写用户名"></el-input>
          </el-form-item>
          <div class="farBox"></div>
          <el-form-item label="密码:" prop="pass">
            <el-input v-model="loginForm.pass" type="password" show-password placeholder="请填写密码"></el-input>
          </el-form-item>
          <div class="farBox"></div>
          <el-form-item>
            <el-button type="info" @click="resetForm">重置表单</el-button>
            <el-button type="primary" @click="login" :loading="isLoading">立即登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      var noEmpty = (rule, value, callback) => {
        value.trim() == '' ? callback(new Error('请完整填写该项')) : callback()
      };
      return {
        isLoading:false,
        loginForm: {
          account: "",
          pass: ""
        },
        rules: {
          account: [{
            validator: noEmpty,
            trigger: 'blur'
          }],
          pass: [{
            validator: noEmpty,
            trigger: 'blur'
          }]
        }
      }
    },
    methods: {
      // 登陆方法（验证）
      login() {
        this.$refs.loginForm.validate(valid => {
          if (!valid) return;
          this.isLoading = true;
          this.valiSucc();
        })
      },
      // 登录(请求)
      valiSucc(){
        let param = new URLSearchParams();
        param.append("grant_type", "user_token");
        param.append("account", this.loginForm.account);
        param.append("password", this.loginForm.pass);
        this.api.apiLogin(param).then(data =>{
          window.sessionStorage.setItem( "token",`${data.token_type} ${data.access_token}`);
          window.sessionStorage.setItem("login", this.loginForm.account);
          this.$router.push("/mainCenter/welcome");
          this.$message({message: '登录成功',type: 'success'});
          this.isLoading = false;
        }).catch(e=>{
          console.log(e);
          this.isLoading = false;
        })
      },
      // 重置表单
      resetForm() {
        this.$refs.loginForm.resetFields();
      }
    }
  }
</script>

<style>
  .loginContainer {
    height: 100vh;
    background: #425569;
  }

  .loginBox {
    min-width: 360px;
    min-height: 270px;
    width: 27vw;
    height: 18vw;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    background: white;
    border-radius: 2%;
    box-sizing: border-box;
  }

  .login-title {
    height: 60px;
    line-height: 60px;
    color: #666666;
    text-align: center;
    font-size: 22px;
    border-bottom: 1px solid #DCDFE6;
  }

  .formBox {
    padding: 0px 20px;
    margin-top: 2vw;
  }

  .farBox {
    height: 10px;
  }

  .btnBox {
    display: flex;
    justify-content: center;
  }
  .btnBox button:first-child{
    margin-right: 20px;
  }
</style>
